<template>
    <div style="height: 100%; text-align: center;">
        <!--面板-->
        <div id="login-panel">

            <!--面板的头部-->
            <div class="panel-top">
                <h2>登录社团菜园</h2>
            </div>

            <!--面板的主要内容-->
            <div class="panel-content">
                <form>

                    <div class="logo">
                        <span class="iconfont icon-logo" style="font-size: 88px; color: green"></span>
                    </div>

                    <div class="int">
                        <label><span class="iconfont icon-xingmingyonghumingnicheng"></span></label>
                        <input type="text" placeholder="输入账号" v-model="userName">
                    </div>

                    <div class="int">
                        <label><span class="iconfont icon-mima"></span></label>
                        <input type="password" placeholder="输入密码" v-model="password">
                    </div>

                    <!--配置信息-->
                    <div class="setting">
                        <div class="remember">
                            <el-checkbox v-model="remember" id="remember">记住账号</el-checkbox>
                        </div>
                    </div>

                    <div class="login">
                        <el-button type="primary" @click="onLogin" :loading="loading">登录</el-button>
                    </div>
                </form>
            </div>

            <!--面板的底部-->
            <div class="panel-footer">
            </div>
        </div>
    </div>
</template>

<script>
import CookieUtil from '../../utils/cookies'
import {login} from '@/api/auth'

export default {
    name: 'Login',
    data() {
        return {
            loading: false,
            userName: '',
            password: '',
            remember: true
        }
    },
    methods: {
        /**
         * 登录
         */
        onLogin() {
            if (this.userName.trim().length === 0) {
                this.$message({message: '请填写用户名', type: 'warning'})
                return
            }
            if (this.password.trim().length === 0) {
                this.$message({message: '请填写密码', type: 'warning'})
                return
            }
            this.loading = true
            let body = {
                userName: this.userName,
                password: this.password
            }
            login(body).then((res) => {
                this.loading = false
                if (res.code !== '0') {
                    this.$notify.error({
                        title: '消息',
                        message: res.message
                    })
                    return
                }
                this.$notify({
                    title: '消息',
                    message: '登录成功',
                    type: 'success'
                });
                window.localStorage.setItem('manage_user', JSON.stringify(res.data))
                if (this.remember === true) {
                    window.localStorage.setItem('_userName', this.userName)
                } else {
                    window.localStorage.removeItem('_userName')
                }
                CookieUtil.setLoginStatus()
                this.$router.replace({name: 'index'})
            })
        }
    },
    mounted() {
        window.localStorage.removeItem('manage_user')
        let _userName = window.localStorage.getItem('_userName')
        if (_userName) {
            this.userName = _userName
            this.remember = true
        } else {
            this.remember = false
        }
    }
}

</script>

<style scoped>
    /*面板*/
    #login-panel {
        /*最大的容器距离顶部50个像素*/
        margin-top: 150px;
        display: inline-block;
        background-color: white;
        border: 1px solid #dddddd;
        padding: 30px;
        border-radius: 6px;
        box-shadow: 2px 2px 2px -2px #DCDFE6;
        width: 300px;
    }

    /*面板头部*/
    #login-panel .panel-top {
        font-size: 13px;
        font-family: Arial;
        font-weight: normal;
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;
        width: 280px;
        margin: 0 auto;
    }

    /*面板中间*/
    #login-panel .panel-content {
        margin-top: 20px;
    }

    #login-panel .panel-content .logo {
        margin-bottom: 20px;
    }

    #login-panel .panel-content .logo img {
        width: 80px;
    }

    #login-panel .panel-content .int {
        height: 40px;
        margin-bottom: 9px;
        position: relative;
    }

    #login-panel .panel-content .int label {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    #login-panel .panel-content .int input {
        width: 100%;
        height: 100%;
        border: 1px solid #dddddd;
        padding-left: 30px;
        /*输入框不超出设置的最大容器*/
        box-sizing: border-box;
        border-radius: 6px;
    }

    #login-panel .panel-content input:focus {
        /*取消边框*/
        outline: none;
        border: 1px solid #81d4fa;
        box-shadow: 0 0 2px #81d4fa;
    }

    #login-panel .panel-content .pwd-login a {
        display: inline-block;
        color: gray;
        font-size: 13px;
    }

    #login-panel .panel-content .pwd-login {
        width: 260px;
        height: 30px;
        line-height: 30px;
    }

    #login-panel .panel-content .setting {
        font-size: 14px;
        padding-top: 5px;
    }

    #login-panel .panel-content .setting .remember {
        float: left;
    }

    #login-panel .panel-content .setting .remember input {
        background-color: #fff;
    }

    #login-panel .panel-content .setting .remember input {
        width: 16px;
        height: 16px;
        vertical-align: text-bottom;
    }

    #login-panel .panel-content .pwd-login input {
        /*设置行内块级标签*/
        display: inline-block;
        width: 18px;
        float: left;
    }

    #login-panel .login button {
        margin-top: 20px;
        width: 100%;
        font-size: 14px;
    }

    #login-panel .reg {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
    }

    #login-panel .reg a {
        color: orangered;
        text-decoration: none;
        margin-left: 5px;
    }

    #login-panel .panel-footer {
        height: 0px;
        line-height: 40px;
    }

    #login-panel .panel-footer img {
        /*设置图片居中*/
        vertical-align: middle;
    }

    #login-panel .panel-footer span {
        /*设置文字垂直居中*/
        vertical-align: middle;
    }

</style>
